<template>
  <div style="padding-bottom: 20px;">
    <el-form style="margin-left: 40px;display: flex; flex-direction: column;justify-content: center;">
      <div>
        <span>选择月份：</span>
        <el-date-picker v-model="selectedDate" type="month" format="yyyy-MM" @change="dataChange" size="small">
        </el-date-picker>
      </div>
      <avue-form ref="form" style="margin-top: 20px;padding: 0;" :option="attachOption" v-model="attachForm"
        :upload-after="uploadAfter">
      </avue-form>
      <!-- 下载数据模板 -->
      <div style="display: flex;align-items: center;width: 280px;">
        <label><span>数据模板：</span></label>
        <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary">
          <i class="el-icon-download el-icon--right"></i>下载数据模板
        </el-button>
      </div>
      <div class="block" style="margin: 20px 0;"> <el-alert title="注意，重复导入相同采购订单将覆盖之前的药品数据" type="warning" show-icon>
        </el-alert></div>
      <div class="block df" v-if="flag" style="width: 280px;display: flex;margin-bottom:  20px;"><span
          class="demonstration">异常数据下载:</span><button
          style=" display: block;border: none;background-color: #fff;color: #5A5A5A;" id="button1" ref="button"
          @click="downError"><i class="el-icon-paperclip"></i>订单数据异常.xlsx</button></div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
      <el-button type="primary" @click="saveEdit">提交</el-button>
      <el-button @click="hide">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { exportBlob } from "@/api/common";
export default {
  props: {
    unloadData: {
      type: Object,
    },
    flag2: {
      type: Boolean
    }
  },
  data() {
    return {
      selectedDate: "",
      templateName: '采购订单模板文件.xlsx',
      templateName1: "订单数据异常.xlsx",
      flag: false,
      attachOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '采购订单',
            prop: 'imgUrl',
            type: 'upload',
            drag: true,
            span: 24,
            hide: true,
            size: "medium",
            loadText: '附件上传中，请稍等',
            fileText:'选取导入数据文件',
            tip: "请上传 .xls,.xlsx 标准格式文件",
            span: 24,
            data: {

            },
            action: "/api/orderDetail/importOrder"
          }
        ]
      },
      attachForm: {
        imgUrl:[]
      },
    }
  },
  created() {
    this.Change()
    this.nowData()
  },
  methods: {
    dataChange() {
      this.attachOption.column[0].data.month = this.format(this.selectedDate)
      console.log(this.attachOption.column[0].data);
    },
    uploadAfter(res, done, loading, column,response) {
      if (!res.success) {
        this.flag = true
      }else if(res.success){
        this.$message({
          type: "success",
          message: "文件上传成功"
        });
      }
      done()
    },
    Change() {
      this.attachOption.column[0].data = this.unloadData
    },
    download() {
      exportBlob(`api/orderDetail/export-template?templateName=${this.templateName}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('模板文件不存在!');
        }
      })
    },
    downError() {
      exportBlob(`api/blade-orderInputError/orderInputError/outputError?templateName=${this.templateName1}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName1;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('模板文件不存在!');
        }
      })
    },
    nowData() {
      console.log(this.unloadData);
      if (this.unloadData.isUpdate == false) {

        let c = new Date()
        this.selectedDate = c
        this.attachOption.column[0].data.month = this.format(this.selectedDate)
        this.attachOption.column[0].action = "/api/orderDetail/importOrder";
      }
     
     else{
      const formattedStr = `${this.unloadData.month.slice(0, 4)}-${this.unloadData.month.slice(4, 6)}`
      this.selectedDate = formattedStr
      console.log(this.selectedDate);
      this.attachOption.column[0].action = "/api/orderDetail/importUpdateOrder"
    }
     console.log(this.unloadData);
  },
  hide() {
    this.$emit("changeUnload", false)
    this.flag = false
  },
  saveEdit() {
    if (this.flag == false) {
      this.$message({
        type: "success",
        message: '上传成功'
      });
      this.hide()
    }
  },
  format(dateTimeString) {
    const date = new Date(dateTimeString);

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    const formattedDate = `${year}${month}`;
    return formattedDate;
  }
}
  }
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  text-align: left !important;
  padding: 0px !important;
  width: 75px !important;
}

::v-deep .el-button--small {
  padding: 10px 20px !important;
  margin-left: -24px !important;
}

::v-deep .avue-form__menu {
  padding: 0 !important;
  height: 0 !important;
}
</style>